<template>
  <div class="about">
    <helloworld>11111</helloworld>

    <h1 v-red="'blue'">This is an about page</h1>
    <h1 v-red="'yellow'">This is an about page2</h1>
  </div>
</template>
<script>
import helloworld from "../components/HelloWorld";
export default {
  directives: {
    red(el, binding) {
      el.style.background = binding.value;
    },
    //以上是子定义指令的简写 有两个参数 el是绑定这个指令的元素 binding跟了一些跟指令有关的值
    // 这是钩子函数bind和update的简写

    red: {
      bind(el, binding) {
        el.style.background = "red";
      },
      inserted() {},
      update(el, binding) {
        el.style.background = "red";
      },
      componentUpdate() {},
      unbind() {},
    },
  },
  components: {
    helloworld,
  },
};
</script>
